<template>
  <div>
    <div class="btns">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="toAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.fuzzy_plate" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker value-format="timestamp" v-model="time" type="daterange" align="right"
            unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="rData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="plate_number" label="车牌号">
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template v-slot="scope">
            <div>
              {{ scope.row.timestamp | fmtTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <div>
              <el-tag @click="toEdit(scope.row)" type="primary" style="margin-right:15px">修改</el-tag>
              <el-tag @click="toDelete(scope.row.id)" type="danger">删除</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" style="margin-top:15px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="visible">
      <el-form ref="myForm" :rules="rules" :model="formSave">
        <el-form-item prop="plate_number" label="车牌号" :label-width="formLabelWidth">
          <el-input v-model="formSave.plate_number" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { get, Delete, post, put } from '@/utils/request'
export default {
  data() {
    return {
      form: {
      },
      time:'',
      rData: [],
      params: {
        page: 1,
        page_size: 10
      },
      total: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      formLabelWidth: '120px',
      formSave: { plate_number: '' },
      id: 0,
      title: '新增车牌',
      visible: false,
      rules: {
        plate_number: [
          { required: true, message: '请输入车牌号', trigger: 'blue' }
        ]
      }
    }
  },
  methods: {
    
    submit() {
      this.$refs.myForm.validate(async valid => {
        let res;
        if (valid) {
          if (this.title == '新增车牌') {
            res = await post('/car/car-info-list/', this.formSave);
            this.$message({
              type: 'success',
              message: res.message
            });
          } else {
            res = await put(`/car/car-info-detail/${this.id}/`, this.formSave);
            this.$message({
              type: 'success',
              message: res.message
            });
          }
          this.visible = false;
          this.getCarData();
        } else {
          this.$message({
            type: 'error',
            message: '保存失败'
          })
        }
      })
    },
    toAdd() {
      this.title = '新增车牌';
      this.visible = true;
      this.formSave = {};
    },
    toEdit(row) {
      this.title = '修改车牌';
      this.visible = true;
      this.formSave.plate_number = row.plate_number;
      this.id = row.id;
    },
    toDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await Delete(`/car/car-info-detail/${id}/`);
        console.log(res);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.params.page = 1;
        this.getCarData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    toSearch() {
      this.params.page = 1;
      this.getCarData()
    },
    async getCarData() {
      if (this.time) {
        this.form.start_time = Math.floor(this.time[0] / 1000);
        this.form.end_time = Math.floor(this.time[1] / 1000);
      }else{
        delete this.form.start_time
        delete this.form.end_time
      }
      let temp = {
        ...this.params,
        ...this.form
      }
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await get('/car/car-info-list/', temp);
      console.log(res);
      this.rData = res.data;
      this.total = res.pagination.total;
    },
    handleSizeChange(val) {
      this.params.page_size = val;
      this.getCarData();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getCarData()
    }
  },
  created() {
    this.getCarData();
  }
}
</script>